<template>
    <div>
        <div id="vditor" class="vditor-box"></div>
    </div>
</template>

<style lang="scss" scoped>
.vditor-box {
    width: 100%;
    height: 100%;
}
</style>

<script>
import VditorPreview from "vditor/dist/method.min";
import "vditor/dist/index.css";
export default {
    name: "MDPreview",
    props: {
        value: {
            default: "",
        },
    },
    data() {
        return {
            editor: "",
        };
    },
    created() {},
    mounted() {
        this.content = this.value;
        VditorPreview.preview(document.getElementById('vditor'), this.content, {
            hljs: {
                style: "dracula",
                lineNumber: true,
            },
            anchor: 1,
            cdn: "/vditor",
            emojiPath: "/vditor/dist/images/emoji",
        });
    },
};
</script>
